<template>
  <!-------- 分类树 -------->
  <div class="side-tree">
    <!-- 顶部 -->
    <div class="side-top">
      <h3>
        {{ topName }}
        <!-- 关闭按钮 -->
        <el-icon v-if="topName!='所有类别'"><CloseBold @click="handleClose" /></el-icon>
      </h3>
    </div>

    <div class="sieving">
      <!-- 选择模块部分 -->
      <div class="tree-box">
        <!-- 树型控件 -->
        <el-tree
          ref="treeRef"
          :data="categoryList"
          :default-expanded-keys="defaultExpandIds"
          :props="{
            children: 'subset',
            label: 'plantTypeName',
          }"
          :expand-on-click-node="false"
          icon-class="el-icon-arrow-right"
          :highlight-current="true"
          node-key="id"
          current-node-key="id"
          @node-click="handleNodeClick"
        >
        </el-tree>

        <!-- 编辑分类 -->
        <el-button @click="handleEditModuleBtn">
          {{ "编辑分类" }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, ref } from "vue";

const props = defineProps({
  // 分类树 原始数据
  categoryList: {
    type: Array,
    required: true,
    default: () => [],
  },
});

const emits = defineEmits(["sideTreeEdit", "clickCategory"]);

onMounted(() => {

});

/** 计算属性 */
const flatTreeData = computed(() => {
  return getFlatList(props.categoryList);
});

const topName = ref("所有类别"); // 顶部模块名称
const defaultExpandIds = ref([]); // 分类树默认展开数据id

const treeRef = ref(null);

/**  当节点被点击的时候触发 */
const handleNodeClick = (data) => {
  topName.value = data.plantTypeName; // 赋值 顶部标题名字
  defaultExpandIds.value = [data.id]; // 默认打开

  emits("clickCategory", data, [...getCrumbsLevel(data), data]);
};

/*** 获取当前节点的层级* **/
const getCrumbsLevel = (node) => {
  let arr = [];
  let parent = flatTreeData.value.find((item) => item.id == node.topId);

  if (parent) {
    arr = arr.concat(getCrumbsLevel(parent), parent);
  }

  return arr;
};

/**   编辑模块按钮点击 */
const handleEditModuleBtn = () => {
  emits("sideTreeEdit", true);
};

/** 定义一个内部函数，用来将嵌套的树形数据结构扁平化 **/
const getFlatList = (list) => {
  let flatList = [];
  list.forEach((item) => {
    flatList.push(item);
    if (item.subset) {
      flatList.push(...getFlatList(item.subset));
    }
  });
  return flatList;
};


/** 设置 分类树 高亮 */ 
const handleSetTreeLight = (id) => {
  treeRef.value.setCurrentKey(id); // 取消高亮

};

// 第二部：暴露方法
defineExpose({
  handleSetTreeLight,
});
/**
 * 关闭按钮 -- 查看所有
 * */
const handleClose = () => {
  topName.value = "所有类别";

  treeRef.value.setCurrentKey(null); // 取消高亮
  emits("clickCategory", null, []);
};
</script>

<style lang="scss" scoped>
.side-tree {
  width: 240px;
  min-height: 600px;
  padding: 0 8px 20px 8px;
  border-radius: 10px;
  margin-right: 30px;
  align-self: baseline;
  flex: none;
  background: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  align-self: auto;

  .side-top {
    padding: 0 16px;
    height: 78px;
    border-bottom: 1px solid #d4d4d4;

    h3 {
      font-size: 18px;
      color: #343957;
      font-weight: bold;
      text-align: left;
      margin: 0;
      line-height: 78px;

      i {
        color: #343957;
        cursor: pointer;
        font-size: 22px;
        float: right;
        height: 78px;

        &:hover {
          color: #3e3e3ebd;
        }
      }
    }
  }

  .tree-box {
    margin-top: 20px;
    padding: 0 16px 50px;
    min-height: 480px;
    border-radius: 10px;
    text-align: center;
    position: relative;

    button {
      padding: 0;
      width: 112px;
      height: 40px;
      text-align: center;
      font-size: 14px;
      color: #5974ff;
      border-radius: 6px;
      background: transparent;
      border: 1px solid #5974ff;

      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%);

      &:hover {
        opacity: 0.8;
      }
    }
  }
}

::v-deep(.tree-box) {
  .el-tree {
    max-height: 600px;
    overflow-y: auto;
    .el-tree-node__label {
      font-size: 16px;
    }

    /**内容*/
    .el-tree-node__content {
      position: relative;
      height: 50px;
      border-radius: 10px 10px 10px 10px;
      text-indent: 24px !important;
      font-size: 16px;
      color: #343957;

      &:hover {
        background: transparent;
        color: #969696;
      }

      /** 箭头*/
      .el-tree-node__expand-icon {
        position: absolute;
        right: 4px;
        font-size: 20px;
        text-align: center;
        padding: 0;
        color: #343957;
      }
    }
  }

  .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent;
  }

  /**选中的背景色*/
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background: linear-gradient(90deg, #5974ff 0%, #7e93ff 100%);
    color: #fff;
  }

  /**  选中的箭头*/
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content
    .el-tree-node__expand-icon {
    color: #fff;
  }

  /**拖动时*/
  .is-dragging {
    .el-tree__drop-indicator {
      width: 100%;
      left: 0 !important;
      background: #f1c588;
    }

    /**经过的dom*/
    .is-drop-inner {
      box-shadow: 0 0 4px rgba(136, 136, 136, 0.599);
      border-radius: 4px;

      .el-tree-node__label {
        color: #4e4e4e;
        background-color: transparent;
      }
    }
  }
}
</style>
